<template>
  <div class="register">

    <div class="zhucebiao">
      <div class="box">
        <h2 style="margin-top:30px;">登录</h2>
      </div>
      <div class="box">
        <input type="text" v-model="modelData.username" placeholder="请输入手机号">
      </div>
      <div class="box">
        <input type="password" v-model="modelData.password" placeholder="输入密码">
      </div>
      <div class="box">
        <input type="button" value="登录" @click='biu'>
      </div>
    </div>
  </div>
</template>

<script>
import { user_login } from "../axios/api";
import { Toast } from 'vant';

export default {
  data() {
    return {
      modelData: { username: '', password: '' },
    }
  },

  methods: {
    biu() {
      if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.modelData.username) == false) {
        Toast.fail('手机号格式错误！')
      } else if (this.modelData.password == '') {
        Toast.fail('密码不能为空！')
      } else {
        user_login({ phone: this.modelData.username, pass: this.modelData.password }).then(
          response => {
            console.log(response.data);
            if (response.data.code == 200) {
              localStorage.setItem('token', response.data.token);
              localStorage.setItem('userinfo', JSON.stringify(response.data.userinfo));
              Toast.success('登陆成功！欢迎回来');
              this.$router.push('/myindex')
            }
          }
        )
      }
    }
  },
}
</script>

<style lang='scss' scoped>
.register {
  width: 100%;
  height: 100%;
}
.zhucebiao {
  width: 100%;
  height: 100%;
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  input {
    width: 90%;
    height: 40px;
    border: 1px solid gray;
    margin: 40px 0;
    border-radius: 30px;
    outline: none;
    padding-left: 8px;
    color: gray;
  }
}
</style>